{% extends "jquery/base.html" %}
{% block title %}Selectable test{% endblock %}

{% load jquery %}

{% block jquery_ui_lib %}
	<script type="text/javascript" src="{% jq_ui_base %}ui.core.js"></script>          
	<script type="text/javascript" src="{% jq_ui_base %}ui.selectable.js"></script>          
{% endblock %}


{% block extra_header %}
<style>
	ul { list-style: none; }
	.ui-selected { background: #727EA3; color: #FFF; }
	.ui-selecting { border: 1px solid #727EA3; padding: 2px; }
	li { background: #CFD4E6; width: 100px; margin: 5px; font-size: 10px; font-family: Arial; padding: 3px; }
</style>
{% endblock %}


{% block jq_document_ready %}
    $("#myList").selectable({
            stop: function(ev, ui) {
                $(".ui-selected").text('selected');
                alert( $.map( $(".ui-selected").get(), function(e, i) {
                  return e.id;
                  })
                );
            }
    });
{% endblock %}


{% block body %}
<div id="dial"></div>
<ul id="myList">
	    <li id=it1>Item 1</li>
	    <li id=it2>Item 2</li>
	    <li id=it3>Item 3</li>
	    <li id=it4>Item 4</li>
</ul>
{% endblock %}                                          
